import React from "react";
import { Link, Routes, Route, Outlet } from "react-router-dom";

const Home0 = () => {
  return <div>home0页面</div>;
};

const Home1 = () => {
  return <div>home1页面</div>;
};

const Home2 = () => {
  return <div>home2页面</div>;
};

const Home = () => {
  return (
    <>
      <div>home组件</div>
      <ul>
        <li>
          <Link to="/home">home0</Link>
        </li>
        <li>
          <Link to="/home/home1">home1</Link>
        </li>
        <li>
          <Link to="/home/home2">home2</Link>
        </li>
      </ul>

      <hr />

      <Outlet />
    </>
  );
};

class About extends React.Component {
  render() {
    return <div>about组件</div>;
  }
}

const App = () => {
  return (
    <>
      <h3>router-v6-nest</h3>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/home" element={<Home />}>
          {/* Route组件是可以直接嵌套的，整个页面所有的路由就可以在一个文件里面进行管理了 */}
          {/* Route组件里面写的东西，会出现在一级路由对应的组件里面的Outlet组件 */}

          {/* index属性表示和上一级路由保持一样的路径 */}
          <Route index element={<Home0 />}></Route>
          {/* 子路由的path没有“/”，相当于在上一级路由后面拼接 */}
          <Route path="home1" element={<Home1 />}></Route>
          <Route path="home2" element={<Home2 />}></Route>
        </Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
